<template>
  <el-container class="allbody" onscroll="false">
    <el-main style="height: 100%; z-index: 5">
      <!--<Calendar-->
      <!--v-on:choseDay="clickDay"-->
      <!--v-on:changeMonth="changeDate"-->
      <!--&gt;</Calendar>-->
      <el-row style="width: 100%; height: 5%">
        <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
      </el-row>
      <el-row style="width: 100%; height: 10%">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item label="年份">
            <el-select
              v-model="location"
              placeholder="请选择"
              @change="yearChange"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-select
              v-model="city"
              placeholder="请选择"
              @change="monthChange"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="日期">-->
          <!--&lt;!&ndash;<el-select v-model="enterprises" placeholder="请选择"@change="dayChange">&ndash;&gt;-->
          <!--&lt;!&ndash;<el-option&ndash;&gt;-->
          <!--&lt;!&ndash;v-for="item in options"&ndash;&gt;-->
          <!--&lt;!&ndash;:key="item.value"&ndash;&gt;-->
          <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
          <!--&lt;!&ndash;:value="item.value">&ndash;&gt;-->
          <!--&lt;!&ndash;</el-option>&ndash;&gt;-->
          <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
          <!--</el-form-item>-->

          <el-form-item>
            <el-button style="color: #009bfe" @click="show">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row style="width: 100%; height: 90%">
        <el-form
          label-width="10px"
          class="form-container"
          :model="postForm"
          ref="postForm"
        >
          <el-table
            :data="tableData"
            style="width: 100%; height: 100%"
            :fit="true"
            height="800"
          >
            <el-table-column prop="id" label="序号" width="130">
            </el-table-column>
            <el-table-column
              prop="commission_date"
              label="样品名称"
              width="220"
            >
            </el-table-column>

            <el-table-column prop="position" label="报告日期" width="210">
            </el-table-column>

            <el-table-column prop="repairContent" label="委托项目" width="210">
            </el-table-column>

            <el-table-column prop="number" label="仪器型号" width="210">
            </el-table-column>

            <el-table-column prop="projectType" label="灵敏度" width="210">
            </el-table-column>

            <el-table-column prop="finishDate" label="检验结果" width="310">
            </el-table-column>

            <el-table-column prop="workUnit" label="备注" width="310">
            </el-table-column>
          </el-table>
        </el-form>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import ElContainer from "element-ui/packages/container/src/main";
import ElAside from "element-ui/packages/aside/src/main";
import ElHeader from "element-ui/packages/header/src/main";
import ElMain from "element-ui/packages/main/src/main";
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import { get, get as userType, del, dels } from "@/api/sys/connSysAuthApi";
import { parseTime } from "@/utils";
import { req } from "@/api/base/BaseApi";

import Calendar from "vue-calendar-component";
const defaultForm = {
  id: undefined,
  commission_date: undefined,
  position: undefined,
  repairContent: undefined,
  number: undefined,
  projectType: undefined,
  finishDate: undefined,
  workUnit: undefined,
  workTime: undefined,
};
export default {
  name: "index",
  components: { Calendar,    Breadcrumb },
  comments: {
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    tableRowStyle({ row, rowIndex }) {
      return "background-color: #02152f;color: #fff";
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #2ec7c9;color: #fff;font-weight: 500;";
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return {
        background: "rgba(34,34,34,0.3)",
        color: "#72C22D",
      };
    },
    show() {
      req("/lifting-service/mgregularcheck/allList", "GET", "")
        .then((response) => {
          this.tableData = response.data;
          let i = 0;
          for (i; i < this.tableData.length; i++) {
            this.tableData[i].commission_date = this.tableData[
              i
            ].commission_date.substr(0, 10);
            this.tableData[i].finish_date = this.tableData[
              i
            ].finish_date.substr(0, 10);
          }
        })
        .catch(() => console.log("page request error"));
    },
    yearChange(id, type) {
      this.year = id;
    },
    monthChange(id, type) {
      this.month = id;
    },
    dayChange(id, type) {
      this.day = id;
    },
  },
  created() {
    // req('/api/sys/auth/MG/pointIndexList', 'POST', '').then(response => {
    //   var i = 0
    //   for (i; i < 56; i++) {
    //     this.tableData[i].one = response.data[i].id
    //     this.tableData[i].two = response.data[i].part
    //     this.tableData[i].three = response.data[i].partcontent
    //   }
    // }).catch(() => console.log('page request error'))
  },
  data() {
    return {
      date: new Date(),
      naviItems: [
        { text: "起重机械" },
        { text: "数据引擎" },
        { text: "监测数据" },
      ],
      options1: [
        {
          value: "2018",
          label: "2018",
        },
        {
          value: "2019",
          label: "2019",
        },
        {
          value: "2020",
          label: "2020",
        },
      ],
      location: "",
      options2: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
        {
          value: "8",
          label: "8",
        },
        {
          value: "9",
          label: "9",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
      ],
      city: "",
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
        {
          value: "8",
          label: "8",
        },
        {
          value: "9",
          label: "9",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
        {
          value: "13",
          label: "13",
        },
        {
          value: "14",
          label: "14",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "17",
          label: "17",
        },
        {
          value: "18",
          label: "18",
        },
        {
          value: "19",
          label: "19",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "21",
          label: "21",
        },
        {
          value: "22",
          label: "22",
        },
        {
          value: "23",
          label: "23",
        },
        {
          value: "24",
          label: "24",
        },
        {
          value: "25",
          label: "25",
        },
        {
          value: "26",
          label: "26",
        },
        {
          value: "27",
          label: "27",
        },
        {
          value: "28",
          label: "28",
        },
        {
          value: "29",
          label: "29",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "31",
          label: "31",
        },
      ],
      calendar: {},
      tableData: [
        {
          id: 1,
          commission_date: "2# 吊运行车主提升版钩横梁",
          position: "2019-08-28",
          repairContent: "磁粉探伤",
          number: "CJE-Ⅰ型磁探仪（105）",
          projectType: "AI-30um/100um",
          finishDate:
            "经对2#吊运200T行车主提升板钩横梁上、下翼板和腹板角焊缝、腹板、对接焊缝（抽查，具体位置见附页示意图）进行磁粉探伤，未发现表面缺陷磁痕显示。",
          workUnit:
            "经对2#吊运200T行车主提升板版钩横梁销轴超声波探伤检测符合 NB/T 47013.3-2015(Ⅱ)级验收要求。",
          workTime: "",
        },
      ],
      postForm: Object.assign({}, defaultForm),
    };
  },
  filters: {
    userTypeFilter(type) {
      let typeText = type;
      userTypes.forEach((val) => {
        if (type === val.value) {
          typeText = val.name;
        }
      });
      return typeText;
    },
    menuFilter(ids) {
      let length = 0;
      if (ids) {
        length = ids.length;
      }
      return length;
    },
    dateTimeFilter(time) {
      return parseTime(time);
    },
  },
  mounted: function () {
    let _this = this; //声明一个变量指向vue实例this,保证作用域一致
    (this.timer = setInterval(function () {
      _this.date = new Date(); //修改数据date
    }, 1000)),
      console.log(this.$route.path); // 输出当前页面的路由，如：/home

    //this.show()
    //this.postForm = Object.assign({}, defaultForm)
  },
};
</script>

<style lang="less" scoped>
.headerbackgroud {
}
.allbody {
  width: 100%;
  height: 1050px;
}
.rowclass {
  width: 100%;
  height: 50%;
}

#text {
  -webkit-text-fill-color: white;
}
.select {
  color: white;
}
.hello {
  // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
  /deep/ input::-webkit-input-placeholder {
    color: #fff;
  }
  /deep/ input::-moz-input-placeholder {
    color: #fff;
  }
  /deep/ input::-ms-input-placeholder {
    color: #fff;
  }

  //修改的是el-input的样式
  //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
  //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
  /deep/ .el-select,
  /deep/ .el-input,
  /deep/ .el-input__inner {
    background-color: #08164d;
    color: #fff;
    border: 0px;
    border-radius: 0px;
    text-align: center;
  }
}
.map1,
.map2,
.map3 {
  position: absolute;
  opacity: 0.5;
}
.map1 {
  margin-left: 580px;
  margin-top: 230px;
  z-index: 2;
  animation: myfirst2 15s infinite linear;
}
.map2 {
  margin-left: 625px;
  margin-top: 275px;
  z-index: 3;
  opacity: 0.2;
  animation: myfirst 10s infinite linear;
}
.map3 {
  margin-left: 650px;
  margin-top: 300px;
  z-index: 1;
}
@keyframes myfirst2 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@keyframes myfirst {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
</style>
